<template>
  <div>
    <el-card>
      <el-table :data="tableData" border height="scorll" max-height="100%">
        <el-table-column
          label="#"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态"> </el-table-column>
        <el-table-column label="操作"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import Mock from 'mockjs'
export default {
  data () {
    return {
      tableData: Mock.mock({
        "list|30": [
          {
            create_time: 1486720211,
            email: "admin@qq.com",
            id: 500,
            mg_state: true,
            mobile: "18670758271",
            role_name: "超级管理员",
            username: "admin",
          }
        ]
      }).list,
    };
  },
};
</script>

<style lang="less" scoped>
.el-card {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  :deep(.el-card__body){
    flex-grow: 1;
    overflow: hidden;
  }
}
.search-input {
  width: 400px;
  margin-right: 20px;
}
.el-pagination {
  padding: 20px;
  text-align: center;
}
</style>